import React, { Component } from 'react'
import axios from 'axios'
import Top from './Top/index'
import Bottom from './Bottom/index'
import Right from './Right/index'

class Home extends Component {

    state = {
        list: [],
        i: 0,
        item: {
            "img": "http://dummyimage.com/150x280/79f2d3",
            "name": "七表由手",
            "time": "8:39",
            "language": "英语3D",
            "num": 9,
            "price": 45,
            "yupiao": 45
        }
    }


    //axios获取数据
    componentDidMount() {
        axios.get('/api/list').then((res) => {
            this.setState({
                list: res.data
            })
        })
    }

    clickBtn(index) {
        this.setState({
            i: index
        })
    }

    setInd(item) {
        this.setState({
            item: item
        })
        console.log(this.state.item)
    }

    render() {
        //从props结构出数据
        let { list, i, item } = this.state
        return (
            <div className='Home'>
                <ul className='tab'>
                    {
                        list && list.length ? list.map((item, index) => {
                            return <li key={index} className={i === index ? 'active' : ''} onClick={
                                this.clickBtn.bind(this, index)
                            }>{item.title}</li>
                        }) : ''
                    }
                    {/* 传参 */}
                    <Top list={list} i={i} setInd={this.setInd.bind(this)} />
                    <Bottom item={item}/>
                    <Right list={list} i={i}/>
                </ul>
            </div>
        )
    }
}

export default Home;